<!--
 * @Author: sbotlp
 * @Email: sbotlp@sina.com
 * @Date: 2019-11-07 22:47:17
 * @LastEditTime: 2019-11-07 23:22:12
 * @Description: http://www.sbotlp.com.cn
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <p>jquery-Deferred 处理异步</p>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <script>
    /* 
      jquery 1.5的变化
      无法改变js异步和单线程本质
      只从写法上杜绝callback这种形式
      它是一种语法糖，但是解耦了代码
      很好的提现了开放封闭原则（对修改封闭，对扩展开放）
    */
    // jquery 1.5版本之前的ajax请求，代码耦合性高，可读性差
    var ajax = $.ajax({
      url:'./data.json',
      success:function(data){
        console.log('data: ', data);
        console.log('success-1');
        console.log('success-2');
        console.log('success-3');
      },
      error: function(error){
        console.log('error: ', error);
      }
    })
    console.log('ajax: ', ajax); // XHR对象
    // jquery 1.5版本之后的ajax请求，遵循了 Deferred，代码解耦，可读性强，很好的体现了，开发封闭原则
    var ajax1 = $.ajax('./data.json');
    ajax.done(function(data) {
      console.log('data: ', data);
    }).fail(function(error) {
      console.log('error: ');
    }).done(function(data) {
      console.log('success-a');
    }).fail(function(error) {
      console.log('error-a');
    }).done(function(data) {
      console.log('success-b');
    }).fail(function(error) {
      console.log('error-b');
    }).done(function(data) {
      console.log('success-c');
    }).fail(function(error) {
      console.log('error-c');
    })
    console.log('ajax: ', ajax1); // Deferred对象
    // jquery 1.5版本之后 Deferred 另一种写法，已经和Promise类似，Promise概念就是jQuery提出的
    var ajax3 = $.ajax('./data.json');
    ajax3.then(function(data){
      console.log('data: ', data);
    },function(error){
      console.log('error: ', error);
    }).then(function(data){
      console.log('success-100');
    },function(error){
      console.log('error-100');
    }).then(function(data){
      console.log('success-200');
    },function(error){
      console.log('error-200');
    }).then(function(data){
      console.log('success-300');
    },function(error){
      console.log('error-300');
    })
    console.log('ajax3: ', ajax3);// Deferred对象
    // jquery Deferred 应用1
    // 给出一段非常简单的异步操作代码，使用setTimeout函数
    



    //新增需求：要在执行完成之后进行某些复杂的操作，代码可能会很多，而且分好几个步骤
  </script>
</body>
</html>